<template>
    <div class="layerRtb layerRtb-threecolumn">
        <three-title :title="{name:'积分详情'}"></three-title>
        <el-date-picker v-model="timeValue" type="month" placeholder="选择日期时间" class="fl ml10 mb10" format="yyyy-M" @change="getIntegralTwoDataFn(2,0)">
        </el-date-picker>
        <div class="layerRtb-scroll thinScroll" v-scrollHeight="137">
            <div v-for="(item, index) in clab" :key="index">
                <div class="analyItem anItemBor" @click="clickFour(index,item)" v-for="(otem, ondex) in item.clad" :key="ondex">
                    <p class="analyItemTit tx-center">{{ondex + 1}}</p>
                    <div class="analyItemCon">
                        <p class="col-md-4">
                            <span class="cLightGray pr10">积分增减</span>
                            <span class="cGreen">{{otem.integralIncreaseOrDecrease}}分</span>
                        </p>

                        <p class="col-md-4">
                            <span class="cLightGray pr10">操作人</span>
                            <span class="cGreen">{{otem.operator_user_name}}</span>
                        </p>
                        <!-- <p class="col-md-4">
                            <span class="cLightGray pr10">卡号</span>
                            <span class="cGreen">{{otem.operator_card_no}}</span>
                        </p> -->
                        <p class="col-md-4">
                            <span class="cLightGray pr10">时间</span>
                            <span class="cGreen">{{otem.createTime}}</span>
                        </p>
                        <p class="col-md-4">
                            <span class="cLightGray pr10">备注</span>
                            <span class="cGreen">{{otem.integral_remake}}</span>
                        </p>

                    </div>
                </div>
            </div>
            <div class="analyItem" v-if="clab.length === 0">
                <p class="analyItemTit tx-center">详情</p>
                <div class="analyItemCon">
                    <p class="col-md-4">
                        <span class="cLightGray pr10">暂无数据</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layerRtb-footer">
            <div class="analyItem">
                <p class="analyItemTit tx-center">综合</p>
                <div class="analyItemCon">

                    <p class="col-md-4">
                        <span class="cLightGray pr10">奖</span>
                        <span class="cGreen">{{integraljiang}}分</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr10">罚</span>
                        <span class="cRed">{{integralfa}}分</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr10">总计</span>
                        <span class="cGreen">{{integralCount}}分</span>
                    </p>
                </div>
            </div>
        </div>
        <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight">
            <!-- 正常 -->
            <inte-Four v-if="fourIndex !== -1" :key='fourIndex' :fourItem="fourItem"></inte-Four>
        </transition-group>
    </div>
</template>
<script>

import { mapGetters } from 'vuex'
import inteFour from './four/inteFour'
import { getIntegralTwoData } from '../../Resources/Api'
export default {
    components: {
        inteFour
    },
    data () {
        return {
            timeValue: '', // 日期
            integralType: 0,
            body: {},
            integralThreeData: {},
            integralCount: 0,
            integraljiang: 0,
            integralfa: 0,
            bigIntegralType: 0,
            fourIndex: -1,
            fourItem: {},
            clab: {},
            currentInput1: 0
        }
    },
    created () {
        this.bigIntegralType = this.$route.query.bigIntegralType
        this.currentInput = this.$route.query.currentInput
        if (this.currentInput === 1) {
            this.currentInput1 = 2
        } else {
            this.currentInput1 = 1
        }
        this.getIntegralTwoDataFn(this.currentInput1, 0)
    },
    computed: {
        ...mapGetters(['leftInfo', 'userInfo', 'updatePlate'])
    },
    methods: {
    // clickFour (index, item) {
    //     this.fourIndex = index
    //     this.fourItem = item
    // },
        getIntegralThreeDataFn () {
            this.integralCount = 0
            this.integraljiang = 0
            this.integralfa = 0

            for (var i = 0; i < this.clab.length; i++) {
                this.integralCount += this.clab[i].integralMoney
                this.integraljiang += this.clab[i].integralIncrease
                this.integralfa += this.clab[i].integralDeduction
            }
        },

        getIntegralTwoDataFn (flag, index) {
            var time = ''
            if (this.timeValue !== '') {
                time = this.$utils.format('yyyy-MM', this.timeValue) + '-01'
            } else {
                time = ''
            }
            getIntegralTwoData({
                user_card_no: this.leftInfo.cardNo,
                levelFlag: flag,
                bigIntegralType: this.bigIntegralType,
                pointTime1: time
            }).then(result => {
                this.body = result.data.Body
                this.clab = result.data.Body.classification[0].clab
                this.getIntegralThreeDataFn()
            })
        }
    },
    watch: {
        $route () {
            this.currentInput = this.$route.query.currentInput
            if (this.currentInput === 1) {
                this.currentInput1 = 2
            } else {
                this.currentInput1 = 1
            }
            this.bigIntegralType = this.$route.query.bigIntegralType
            this.getIntegralTwoDataFn(this.currentInput1, 0)

            // this.getIntegralThreeDataFn()
        }
    }
}
</script>
